<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>
		{block name="webtitle"}{$webtitle|default=config('web.name')}{/block}
	</title>
	{css href="__PLUGIN_SRC__/Bootstrap/bootstrap.min.css"}
	{css href="__PLUGIN_SRC__/Element/element.min.css"}
	{css href="__PLUGIN_SRC__/Vue/animate.css"}
	{css href="__TEMPLATE_STATIC__/bsadmin/index.css"}
	<style type="text/css">
		    html, body {
		        height: 100%;
		        width: 100%;
		        min-width: auto;
		        margin: 0;
		        overflow: hidden;
		    }
		    body {
		        position:relative;
		       background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
		    }
		    .web_name{
		    	color: #fff;
		    }
		    .login-window{
		    	position: relative;
		    	width: 400px;
		    	margin: 0 auto;
		    	z-index: 99;
		    }
		    .el-form-item{overflow: hidden;}
		    .login-window .el-form-item__label{color: #ffffff; padding: 0;margin-bottom: 0;}
		    .login-window .el-input__inner{background-color: rgba(255,255,255,.95);color: #343434;}
		    .login-window .el-input__prefix, .el-input__suffix{color: #67C23A;}
		    .login-window .el-input-group__append, .login-window .el-input-group__prepend{padding: 0;}
		    canvas{left: 0;top:0;}
		    .copyright{}
			@media (max-width: 576px){
			    .login-window{
			    	width: 90%;
			    }
			}
	</style>
</head>
<body>
	<div class="main wrap" id="app">
		<vue-mask v-if="view.mask"></vue-mask>
		<div class="h4 h-ms-4 web_name p-3 p-sm-5">{:config('web.name')} Control</div>
		<div class="flex1 flex-v-center h-100">
			<div>
				<div class="login-window">
					<el-form 
						label-position="top" 
						ref="login"
						:model="form"
						:rules="rules"
						status-icon
						hide-required-asterisk="true"
						@submit.native.prevent="submitForm('login')"
						:disabled="view.loading">
					  	<el-form-item label="账户" prop="user">
					    	<el-input v-model="form.user" autofocus placeholder="账户"
							@keyup.enter.native="submitForm('login')"></el-input>
					  	</el-form-item>
					  	<el-form-item label="密码" prop="pass">
					    	<el-input type="password" v-model="form.pass" placeholder="密码"></el-input>
					  	</el-form-item>
				      	<transition enter-active-class="animated slideInDown" leave-active-class="animated slideOutUp">
							  	<el-form-item v-if="is_imgcode&&captcha_type==1">
							        <div id="GeeTestCaptcha">
							            <div ref="GeeTestCaptchaWait" class="text-secondary">正在加载验证码......</div>
							        </div>
							  	</el-form-item>
							  	<el-form-item v-else-if="is_imgcode&&captcha_type==2">
							        <div id="vaptchaContainer">
										<div class="vaptcha-init-main">
										    <div class="vaptcha-init-loading">
										    <a href="/" target="_blank">
										        <img src="https://r.vaptcha.net/public/img/vaptcha-loading.gif" />
										    </a>
										    <span class="vaptcha-text">正在加载验证码...</span>
										    </div>
										</div>
									</div>
							  	</el-form-item>
							  	<el-form-item v-else-if="is_imgcode&&captcha_type==3">
							        阿里
							  	</el-form-item>
							  	<el-form-item v-else-if="is_imgcode&&captcha_type==4">
							  		<el-button 
							  		native-type="button" 
							  		:type="form.tsec?'success':'warning'"
							  		class="rounded-0 w-100"
							  		:icon="form.tsec?'el-icon-circle-check':'el-icon-thumb'"
							  		ref="TencentCaptchaEl"
							  		:data-appid="_config.captchatsec"
							  		data-cbfn="vm.TencentCaptchaCallback">
							  			{{form.tsec?'验证成功':'点击验证'}}
							  		</el-button>
							  	</el-form-item>
							  	<el-form-item label="验证码" prop="imgcode" v-else-if="is_imgcode">
									<el-input placeholder="验证码" v-model="form.imgcode" maxlength="6">
								    	<template slot="append" class="px-0">
								    		<img src="/captcha" ref="captcha" onclick="this.src='/captcha'" height="36" class="pointer">
								    	</template>
									</el-input>
							  	</el-form-item>
						</transition>
					  	<el-form-item class="text-center pt-3">
					    	<el-button type="primary" class="px-5" native-type="submit" :loading="view.loading">{{view.loading?'登录中...':'登录'}}</el-button>
					  	</el-form-item>
					</el-form>
				</div>
				<div class="copyright text-center pt-5 text-white h6">Powered by <a href="https://www.xycms.com" class="text-white" target="_blank">XYCMS</a></div>
			</div>
		</div>
	</div>
	{js href="__PLUGIN_SRC__/Vue/vue.min.js"}
	{js href="__PLUGIN_SRC__/Vue/vue-lazyload.js"}
	{js href="__PLUGIN_SRC__/Element/element.min.js"}
	{js href="__PLUGIN_SRC__/jQuery/jquery.min.js"}
	{js href="__PLUGIN_SRC__/GeeTest/gt.js"}
	{js href="__PLUGIN_SRC__/Vaptcha/v3.js"}
	{js href="__PLUGIN_SRC__/TSec/TCaptcha.js"}
	{js href="__TEMPLATE_STATIC__/bsadmin/index.js"}
	{js href="__TEMPLATE_STATIC__/bsadmin/polygonizr.min.js"}
	<script type="text/javascript">
		var CaptchaResultObj=null;
		var vm=new Vue({
			el:'#app',
			data:{
				captcha_type:{:config('captcha.type')},
				is_imgcode:{$is_imgcode},
				view:{
					mask:true,
					loading:false,
				},
				form:{
					user:'',
					pass:'',
					imgcode:'',
					tsec:null
				},
				rules: {
		          user: [
		            { required: true, message: '请输入账号', trigger: 'blur' },
		            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
		          ],
		          pass: [
		            { required: true, message: '请输入密码', trigger: 'blur' },
		            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
		          ],
		          imgcode: [
		            { required: true, message: '请输入验证码', trigger: 'blur' }
		          ],
		        }
			},
			created(){
				XYBase.created(this);
				this.getCaptcha();
			},
		    methods: {
		      submitForm(formName) {
		      	var _this=this;
		        this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	_this.view.loading=true;
					if(this.is_imgcode){
						switch(this.captcha_type){
							case 1:
								if (CaptchaResultObj)
		          				_this.form.geetest=CaptchaResultObj.getValidate();
							break
							case 2:
								if (CaptchaResultObj)
		          				_this.form.vaptcha=CaptchaResultObj.getToken();
							break
						}
					}
		          	$.ajax({
		          		url:'/login',
		          		data:_this.form,
		          		type:'post',
		          		dataType:'json',
		          		error:function(err){
				          	_this.view.loading=false;
			          		_this.getCaptcha();
				          	XYBase.error(XYBase.config.system_network_error);
		          		},
		          		success:function(ret){
		          			if (ret) {
			          			if (ret.code === 0) {
			          				XYBase.success(ret.msg);
			          				window.location.reload();
			          			}else if(ret.code === 1001){
				          			_this.view.loading=false;
			          				_this.is_imgcode=1;
			          				XYBase.error(ret.msg);
			          			}else{
				          			_this.view.loading=false;
			          				XYBase.error(ret.msg);
			          			}
		          			}else{
					          	XYBase.error(XYBase.config.system_network_error);
		          			}
			          		_this.getCaptcha();
		          		}
		          	});
		          } else {
		          	XYBase.error('请把表单填写完整');
		            return false;
		          }
		        });
		      },
		      getCaptcha(){
				if(this.is_imgcode){
					switch(this.captcha_type){
						case 1:
							this.getGeeTestParam();
						break;
						case 2:
				        this.$nextTick(_ => {
							vaptcha({
							    vid: '{:config('xy_vaptcha.vid')}',
							    type: 'click',
							    container: '#vaptchaContainer',
							}).then(function (vaptchaObj) {
								CaptchaResultObj=vaptchaObj;
							    vaptchaObj.render();
							})
				        });
						break;
						case 4:
					        this.$nextTick(_ => {
					        	if(this.$refs.TencentCaptchaEl)
								new TencentCaptcha(this.$refs.TencentCaptchaEl.$el);
					        });
						break;
						default:
				        this.$nextTick(_ => {
							this.$refs.captcha.src='/captcha?t='+(new Date()).getTime();
							this.form.imgcode='';
				        });
					}
				}
		      },
		      getGeeTestParam(){
		      	var _this=this;
				$.ajax({
				    url: "/captcha?t=" + (new Date()).getTime(), // 加随机数防止缓存
				    type: "get",
				    dataType: "json",
				    success: function (data) {
				        initGeetest({
				            gt: data.gt,
				            challenge: data.challenge,
				            new_captcha: data.new_captcha,
				            offline: !data.success,
				            product: "float",
				            width: "100%"
				        },_this.GeeTestHandler);
				    }
				});
		      },
		      GeeTestHandler(captchaObj){
		      	var _this=this;
		      	CaptchaResultObj=captchaObj;
		      	$('#GeeTestCaptcha').html('');
			    captchaObj.appendTo("#GeeTestCaptcha");
			    captchaObj.onReady(function () {
			        _this.$refs.GeeTestCaptchaWait.style.display='none';
			    });
		      },
		      TencentCaptchaCallback(res){
				if(res.ret === 0){
		      		CaptchaResultObj=res;
		      		this.form.tsec=CaptchaResultObj;
				}
		      }
		    }
		});
		$('body').polygonizr();
		$(window).resize(function() {
			$('canvas').remove();
			$('body').polygonizr();
		});
	</script>
</body>
</html>